<template>
  <div>
    <h3>MusicItem</h3>
    <p>id:{{ route.params.id }}</p>
    <p>name:{{ route.params.name }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MusicItem",
  beforeRouteEnter(to, from, next) {
    console.log("Item 组件进入");
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log("Iten 组件更新");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("Item 组件离开");
    next();
  },
});
</script>

<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
</script>

<style  scoped >
</style>